<template>
  <div class="m-pagination">
    <p v-if="pagination" class="cor666">共 {{pagination}} 条</p>
    <Pagination
        v-if="pagination"
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="pagination"
        layout="pager, jumper"
        @current-change="handleChangePage"/>
  </div>
</template>

<script>
import { Pagination } from 'element-ui'

export default {
  name: 'MPagination',
  components: { Pagination },
  props: {
    title: String,
    pageSize: {
      type: Number,
      default: 10
    },
    pagination: {
      type: Number,
      defalut: 1
    }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  methods: {
    handleChangePage() {
			this.$emit('changePage',this.currentPage);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.m-pagination {
  p {
    position: relative;
    top: 10px;
  }
  display: flex;
  justify-content: space-between;
  align-items: center;

  /deep/ .el-pagination {
    display: flex;
    align-items: center;

    .el-pager {
      li {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        border-radius: 10px;
		font-weight: normal;
      }
      li {
        background-color: #fff;
      }
      li.active {
        background-color: $theme-color-1;
      }
      li:not(.active):hover {
        color: $theme-color-1;
      }
    }

    .el-pagination__jump {
      height: 40px;
      line-height: 40px;
      font-size: 16px;

      .el-input__inner:focus {
        border-color: $theme-color-1;
      }
    }
  }
}
</style>
